<template>
	<view class="coups">
		<view class="content">
			<image :src="data.coupon_image" mode="widthFix"></image>
			<view class="item" v-for="i in dataArr" :key="i" :class="i.already_get!=0?'itme1':i.total==0?'item2':'item'" >
				<view class="item_price">
					<view class="item_price_left">
						{{parseInt(i.amount)}}
					</view>
					<view class="item_price_right">
						<view class="item_price_right_top">{{i.name}}</view>
						<view class="item_price_right_bottom">满{{parseInt(i.limit)}}元可使用</view>
					</view>
				</view>
				<view class="button" :class="i.already_get!=0?'button1':i.total==0?'button2':'button'" @click="to(i.already_get!=0?'1':i.total==0?'0':'2',i.coupon_id)">
					{{i.already_get!=0?'立即使用':i.total==0?'已抢完':'立即领取'}}
				</view>
				<view class="item_ps">·全场通用</view>
				<view class="item_ps">·领取后{{$dateFormat(i.date_expire*1000,'d')-1}}天有效</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataArr:[],
				data:[]
			};
		},
		methods:{
			to(e,i){
				console.log(e)
				if(e=='2'){
					this.$request('/app/coupon/drawCoupon','post',{
						access_token:JSON.parse(uni.getStorageSync('access_token')),
						coupon_id:i
					}).then(res=>{
						this.getcoupon()
					})
				}else if(e=='1'){
					uni.switchTab({
						url:'/pages/shopping/shopping/shopping'
					})
				}
			},
			getcoupon(){
				this.$request('/app/setting/couponConfig','post',{
					access_token:JSON.parse(uni.getStorageSync('access_token')),
				}).then(res=>{
					this.data=res.content
					console.log(res)
				})
				this.$request('/app/coupon/canGetCoupon','post',{
					access_token:JSON.parse(uni.getStorageSync('access_token')),
				}).then(res=>{
					this.dataArr=res.content
				})
			}
		},
		onShow() {
			this.getcoupon()
		}
	}
</script>

<style lang="less" scoped>
	page{
		height: 100%;
	}
	.coups{
		height: 100%;
					background: #f4645e;
		.content{
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image{
				width: 100%;
				// position: absolute;
				// top: -30px;
				// left: 0;
				// z-index: 0;
			}
			.item{
				position: relative;
				    margin-bottom: 30rpx;
				width: 90%;
				    padding: 0 20px 0 30px;
				box-sizing: border-box;
				background-image: url(../static/bg_voucher_f01@3x.png);
				background-size: 100% 100%;

				.button{
					position: absolute;
					right: 0rpx;
					top: 96rpx;
					font-size: 28rpx;
					color: rgb(255,255,255);
					background-image: url(../static/btn_receive@3x.png);
					background-size: 100% 100%;
					padding: 10px 20px;
				}
				.button1{
					background-image: url(../static/btn_use@2x.png);
				}
				.button2{
					background-image: url(../static/btn_null@2x.png);
				}
				.item_price{
					display: flex;
					align-items: center;
					    margin-bottom: 40rpx;
					.item_price_left{
						font-size: 100rpx;
						margin-right: 24rpx;
						font-family: DINAlternate-Bold, DINAlternate;
						font-weight: bold;
						color: rgb(244,100,94);
					}
					.item_price_right{
						.item_price_right_top,.item_price_right_bottom{
							font-size: 30rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: rgb(0,0,0);
						}
					}
				}
				.item_ps{
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: rgb(121,121,121);
					    margin-bottom: 10rpx;
				}
			}
			.itme1{
				background-image: url(../static/bg_voucher02@2x.png);
			}
			.item2{
				background-image: url(../static/bg_voucher03@2x.png);
			}
		}
	}
</style>
